<template>
  <!-- :style="{backgroundImage: 'url('+imageURL+')'}" -->
  <view class="content" v-if="!token">
    <view class="mantle">
      <view style="display: flex; justify-content: center">
        <image src="@/static/image/logo.png" style="border-radius: 12rpx" />
      </view>
      <view class="form" style="padding: 0 40rpx">
        <view class="item">
          <image src="@/static/image/login_phone.png" />
          <input
            @input="input"
            v-model="param.username"
            placeholder-style="color:#B6BFC6"
            placeholder="请输入账号"
          />
          <image
            v-if="param.username"
            @click="clear('username')"
            src="@/static/image/input_delete.png"
          />
        </view>
        <view class="item">
          <image src="@/static/image/login_password.png" />
          <input
            type="text"
            password="true"
            placeholder-style="color:#B6BFC6"
            v-model="param.password"
            placeholder="请输入密码"
          />
          <image
            v-if="param.password"
            @click="clear('password')"
            src="@/static/image/input_delete.png"
          />
        </view>
        <view
          class="Btn"
          :style="{
            background: check(false)
              ? 'linear-gradient(135deg, #0053a3 40%, #00a663)'
              : 'linear-gradient(135deg, #a7cee0 40%, #d0dea7)',
          }"
          @click="submit"
          >登录</view
        >
        <!-- <view @click="goUrl('updatePwd')" style="text-align: right;padding-right: 35rpx;margin-top: 30rpx;color:rgb(74, 125, 221);">修改密码</view> -->
      </view>
    </view>
  </view>
</template>

<script>
import API from "@/common/api.js";
import util from "@/common/util.js";
export default {
  data() {
    return {
      imageURL: "/static/image/water.jpg",
      param: {
        username: uni.getStorageSync("loginAccount") || "",
        password: "",
      },
      codeFlag: true,
      timer: "",
      time: 60,
      token: uni.getStorageSync("token"),
    };
  },
  onShow() {
    setTimeout(() => {
      try {
        // plus.screen.lockOrientation("portrait-primary");
      } catch (e) {}
    }, 100);
  },
  onLoad(options) {
    try {
      // plus.navigator.removeAllCookie();
    } catch (error) {}
    if (this.token) {
      uni.reLaunch({
        url: "home",
      });
    }
  },
  methods: {
    input() {
      setTimeout(() => {
        this.param.username = util.noEmoji(this.param.username);
      }, 100);
    },
    submit() {
      if (!this.check(true)) {
        return;
      }
      API.login(this.param).then((res) => {
        if (res.pzhAuthorization && res.token) {
          uni.hideLoading();
          uni.setStorage({
            key: "loginAccount",
            data: this.param.username,
          });
          uni.setStorage({
            key: "pzhAuthorization",
            data: res.pzhAuthorization,
          });
          uni.setStorage({
            key: "user",
            data: res.user,
          });
          uni.setStorage({
            key: "token",
            data: res.token,
          });
          setTimeout(() => {
            uni.reLaunch({
              url: "home",
            });
          }, 100);
        }
      });
    },
    check(flag) {
      let msg = "";
      if (!this.param.username) {
        msg = "请输入账号";
      } else if (!this.param.password) {
        msg = "请输入密码";
      }
      // else if(!this.flag&&!this.param.passcode){
      // 	msg='请输入验证码'
      // }
      if (msg) {
        if (flag) {
          uni.showToast({
            title: msg,
            icon: "none",
            duration: 2000,
          });
        }
        return false;
      } else {
        return true;
      }
    },
    clear(key) {
      this.param[key] = "";
    },
    goUrl(url) {
      uni.navigateTo({
        url: "./" + url,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  height: 100vh;
  background: linear-gradient(135deg, #a7cee0 50%, #d0dea7);
  // background: white;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  .bki {
    width: 100vw;
    height: 100vh;
  }
  .mantle {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(2px);
    width: 80vw;
    height: 70vh;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 15vh;
    left: 10vw;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: rgba(255, 255, 255, 0.15) 0px 6px 15px 0px;
    color: rgba(255, 255, 255, 0.35);
  }
  image {
    width: 200rpx;
    height: 200rpx;
  }
  .title {
    font-size: 40rpx;
    font-weight: 500;
    color: white;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .form {
    margin-top: 20px;
    font-size: 31rpx;
    .item {
      display: flex;
      border-bottom: 1px solid rgba(255, 255, 255, 0.25);
      image {
        width: 32rpx;
        height: 32rpx;
        display: block;
        margin-top: 46rpx;
      }
      input {
        width: calc(100% - 104rpx);
        padding: 40rpx 0;
        color: #188e96;
        font-size: 30rpx;
        margin: 0 20rpx;
      }
      text {
        width: 222rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(143, 188, 197, 1);
        line-height: 124rpx;
        margin-left: 20rpx;
        text-align: right;
      }
    }

    .Btn {
      margin-top: 100rpx;
      font-size: 30rpx;
      width: 100%;
      line-height: 90rpx;
      color: white;
      opacity: 0.8;
      border: none;
      outline: none;
      border-radius: 50rpx;
      text-align: center;
    }
  }
  .rember {
    display: flex;
    justify-content: space-between;
    line-height: 160rpx;
    text:first-child {
      font-size: 26rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(232, 49, 18, 0.5);
    }
    text:last-child {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(82, 92, 96, 1);
    }
  }
  .footer {
    font-size: 11px;
    position: absolute;
    bottom: 50px;
    display: flex;
    justify-content: center;
    width: 90%;
    p {
      color: rgb(131, 131, 131);
      text {
        text-decoration: underline;
        margin-left: 5px;
      }
    }
  }
}
</style>
